<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="ec-canvas/echarts.js"></script>
    <script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>

<div id="container" style="height: 800px;width:1200px;background:white;margin:20px 0 0;"></div>

<script type="text/javascript">
    let geoJson = null;
    let admiJson = null;
    let unisJson = null;
    let flag1, flag2, flag3, flag4;
    flag1 = flag2 = flag3 = flag4 = false;

    $.getJSON('./utils/unis.json',data=>{
        unisJson = data;
        flag1 = true;
        console.log(unisJson);
        if(flag1 && flag2 && flag3 && flag4)
            init();
    })
    $.getJSON('./utils/admi.json',data=>{
        admiJson = data;
        flag2 = true;
        console.log(admiJson);
        if(flag1 && flag2 && flag3 && flag4)
            init();
    })
    $.getJSON('./mapData.json',data=>{
        geoJson = data;
        flag3 = true;
        console.log(geoJson);
        if(flag1 && flag2 && flag3 && flag4)
            init();
    })

    // 定义全局图像实例名
    let myMap = null;
    let focus = 13;
    const rawData = [
        { name: '北京', value: 0 },
        { name: '天津', value: 0 },
        { name: '上海', value: 0 },
        { name: '重庆', value: 0 },
        { name: '河北', value: 0 },
        { name: '河南', value: 0 },
        { name: '云南', value: 0 },
        { name: '辽宁', value: 0 },
        { name: '黑龙江', value: 0 },
        { name: '湖南', value: 0 },
        { name: '安徽', value: 0 },
        { name: '山东', value: 0 },
        { name: '新疆', value: 0 },
        { name: '江苏', value: 0 },
        { name: '浙江', value: 0 },
        { name: '江西', value: 0 },
        { name: '湖北', value: 0 },
        { name: '广西', value: 0 },
        { name: '甘肃', value: 0 },
        { name: '山西', value: 0 },
        { name: '内蒙古', value: 0 },
        { name: '陕西', value: 0 },
        { name: '吉林', value: 0 },
        { name: '福建', value: 0 },
        { name: '贵州', value: 0 },
        { name: '广东', value: 0 },
        { name: '青海', value: 0 },
        { name: '西藏', value: 0 },
        { name: '四川', value: 0 },
        { name: '宁夏', value: 0 },
        { name: '海南', value: 0 },
        { name: '台湾', value: 0 },
        { name: '香港', value: 0 },
        { name: '澳门', value: 0 }];
    let data = rawData;
    let provContent = new Array(34);
    initProvContent();
    $(function (){
        flag4 = true;
        console.log('OK, now waiting for JSONs.')
        if(flag1 && flag2 && flag3 && flag4)
            init();
    });
    function init(){
        console.log('JSONs Received.')
        initChartMap();
        setTimeout(() => {
            this.getOutList();
        }, 0)
    }

    function getOutList () {
        initProvContent();
        data = JSON.parse(JSON.stringify(rawData));
        admiJson.admi.forEach(function (item, index, array) {
            let unis = unisJson.unis.filter(elem => elem.name == item.univ);
            //console.log(unis)
            let i = 0;
            if (unis && unis.length > 0) {
                var len = data.length
                for (var index_ = 0; index_ < len; index_++) {
                    if (data[index_].name == getAbbr(unis[0].province)) {
                        i = index_;
                        break;
                    }
                }
                data[i].value++;
                provContent[i].push(item);
                provContent[i][provContent[i].length - 1].city = unis[0].city;
            } else {
                console.error(item.name, item.univ);
            }
        })

        showProvContent()

        changeMap(data)
    }
    /**
     * 修改地图数据，重绘地图
     */
    function changeMap(area) {
        let tempMap = []
        area.length && area.forEach(item => {
            let obj = {}
            obj.name = item.name,
                obj.value = item.value,
                tempMap.push(obj)
        })
        myMap.setOption({
            series: [{
                data: tempMap
            }]
        })
    }

    /**
     * 全国疫情分布地图
     */
    function initChartMap() {
        myMap = echarts.init(document.getElementById("container"));
        echarts.registerMap('china', geoJson); // 绘制中国地图
        const option = {
            tooltip: {
                show: 'true',
                trigger: 'item',
                confine: 'true',
                backgroundColor: "#FFF",
                renderMode: 'richText',
                alwaysShowContent: 'false',
                padding: [
                    10,  // 上
                    15,  // 右
                    8,   // 下
                    15,  // 左
                ],
                extraCssText: 'box-shadow: 2px 2px 10px rgba(21, 126, 245, 0.35);',
                textStyle: {
                    fontFamily: "'Microsoft YaHei', Arial, 'Avenir', Helvetica, sans-serif",
                    color: '#005dff',
                    fontSize: 12,
                },
                formatter: function (params, ticket, callback) {
                    focus = getIndex(params.name);
                    showProvContent();

                    return params.name + " :  " + params.value;
                }
            },
            visualMap: {
                // 左下角定义 在选中范围中的视觉元素 渐变地区颜色
                type: 'piecewise', // 类型为分段型
                top: "bottom",
                right: 10,
                splitNumber: 6,
                seriesIndex: [0],
                itemWidth: 20, // 每个图元的宽度
                itemGap: 2,    // 每两个图元之间的间隔距离，单位为px
                pieces: [      // 自定义每一段的范围，以及每一段的文字
                    //{ gte: 6, label: '6人以上', color: '#' }, // 不指定 max，表示 max 为无限大（Infinity）。
                    { gte: 5, label: '5人以上', color: '#035cf5' },
                    { gte: 4, lte: 4, label: '4人', color: '#3375e4' },
                    { gte: 3, lte: 3, label: '3人', color: '#6797ef' },
                    { gte: 2, lte: 2, label: '2人', color: '#96b5ef' },
                    { gte: 1, lte: 1, label: '1人', color: '#bacae8' }          // 不指定 min，表示 min 为无限大（-Infinity）。
                ],
                // inRange: {
                //   // 渐变颜色，从小到大（会出现显示不完全的情况！！！即出现白块，而且此处并没有设置白色）
                //   color: ['#d1d4da', '#bacae8', '#96b5ef', '#6797ef', '#3375e4', '#035cf5']
                // },
                textStyle: {
                    color: '#737373'
                }
            },
            geo: [
                {
                    // 地理坐标系组件
                    map: "china",
                    roam: false,      // 可以缩放和平移
                    aspectScale: 0.8, // 比例
                    layoutCenter: ["50%", "38%"], // position位置
                    layoutSize: 360,              // 地图大小，保证了不超过 360x360 的区域
                    label: {
                        // 图形上的文本标签
                        normal: {
                            show: true,
                            textStyle: {
                                color: "rgba(0, 0, 0, 0.9)",
                                fontSize: '8'
                            }
                        },
                        emphasis: { // 高亮时样式
                            color: "#333"
                        }
                    },
                    regions: [
                        {
                            name: "南海诸岛",
                            itemStyle: {
                                // 隐藏地图
                                normal: {
                                    opacity: 0, // 为 0 时不绘制该图形
                                }
                            },
                            label: {
                                show: false // 隐藏文字
                            }
                        }
                    ],
                    itemStyle: {
                        // 图形上的地图区域
                        normal: {
                            borderColor: "rgba(0,0,0,0.2)",
                            areaColor: "#005dff"
                        },
                        emphasis: {
                            // 高亮时
                            areaColor: "#99CC33",
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowBlur: 10,
                            borderWidth: 0,
                            shadowColor: "rgba(0, 93, 255, 0.2)"
                        }
                    }
                }
            ],
            series: [
                {
                    type: 'map',
                    mapType: 'china',
                    geoIndex: 0,
                    roam: false, // 鼠标是否可以缩放
                    label: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    data: [
                        { name: '北京', value: 0 },
                        { name: '天津', value: 0 },
                        { name: '上海', value: 0 },
                        { name: '重庆', value: 0 },
                        { name: '河北', value: 0 },
                        { name: '河南', value: 0 },
                        { name: '云南', value: 0 },
                        { name: '辽宁', value: 0 },
                        { name: '黑龙江', value: 0 },
                        { name: '湖南', value: 0 },
                        { name: '安徽', value: 0 },
                        { name: '山东', value: 0 },
                        { name: '新疆', value: 0 },
                        { name: '江苏', value: 0 },
                        { name: '浙江', value: 0 },
                        { name: '江西', value: 0 },
                        { name: '湖北', value: 0 },
                        { name: '广西', value: 0 },
                        { name: '甘肃', value: 0 },
                        { name: '山西', value: 0 },
                        { name: '内蒙古', value: 0 },
                        { name: '陕西', value: 0 },
                        { name: '吉林', value: 0 },
                        { name: '福建', value: 0 },
                        { name: '贵州', value: 0 },
                        { name: '广东', value: 0 },
                        { name: '青海', value: 0 },
                        { name: '西藏', value: 0 },
                        { name: '四川', value: 0 },
                        { name: '宁夏', value: 0 },
                        { name: '海南', value: 0 },
                        { name: '台湾', value: 0 },
                        { name: '香港', value: 0 },
                        { name: '澳门', value: 0 }
                    ]
                }]
        };

        myMap.setOption(option);
        return myMap
    }

    function getAbbr(province){
        const abbrData = [
            { name: '北京', value: '北京市' },
            { name: '天津', value: '天津市' },
            { name: '上海', value: '上海市' },
            { name: '重庆', value: '重庆市' },
            { name: '河北', value: '河北省' },
            { name: '河南', value: '河南省' },
            { name: '云南', value: '云南省' },
            { name: '辽宁', value: '辽宁省' },
            { name: '黑龙江', value: '黑龙江省' },
            { name: '湖南', value: '湖南省' },
            { name: '安徽', value: '安徽省' },
            { name: '山东', value: '山东省' },
            { name: '新疆', value: '新疆维吾尔自治区' },
            { name: '江苏', value: '江苏省' },
            { name: '浙江', value: '浙江省' },
            { name: '江西', value: '江西省' },
            { name: '湖北', value: '湖北省' },
            { name: '广西', value: '广西壮族自治区' },
            { name: '甘肃', value: '甘肃省' },
            { name: '山西', value: '山西省' },
            { name: '内蒙古', value: '内蒙古自治区' },
            { name: '陕西', value: '陕西省' },
            { name: '吉林', value: '吉林省' },
            { name: '福建', value: '福建省' },
            { name: '贵州', value: '贵州省' },
            { name: '广东', value: '广东省' },
            { name: '青海', value: '青海省' },
            { name: '西藏', value: '西藏自治区' },
            { name: '四川', value: '四川省' },
            { name: '宁夏', value: '宁夏回族自治区' },
            { name: '海南', value: '海南省' },
            { name: '台湾', value: '台湾省' },
            { name: '香港', value: '香港特别行政区' },
            { name: '澳门', value: '澳门特别行政区' }];
        var newarr = abbrData.filter(item => item.value == province)
        if(newarr && newarr.length!=0)
            return newarr[0].name;
        return "未知";
    }

    function initProvContent(){
        for(var i=0; i<34; i++){
            provContent[i] = new Array();
        }
    }

    function showProvContent(){
        var list = new Array();
        for(var i = 0; i < provContent[focus].length; i++){
            list.push({"name": provContent[focus][i].name, "univ": provContent[focus][i].univ, "city": provContent[focus][i].city })
        }
        // TODO: change QQQ to jQuery
        var listData = list
    }

    function getIndex(name){
        var ind;
        for(var i=0; i<data.length; i++){
            if(data[i].name == name){
                ind = i;
                break;
            }
        }
        return ind;
    }
</script>
</body>
</html>